html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#app {
	height: 100%;
}

#app * {
	box-sizing: border-box;
}

.draggable {
	cursor: grab;
}
.base-component {
	margin: 10px;
	user-select: none;
	width: calc(50% - 20px);
	padding: 10px;
	background-color: #f5f7fa;
	display: flex;
	justify-content: center;
	align-items: center;
	word-break: break-all;
}

.app-container {
	height: 100%;
}

.app-container--bigscreen {
	// color: #fff;
}

.app-container--bigscreen-designer {
	// background-color: #484848;
}

.bigscreen-designer__aside {
	width: 360px;
}

.bigscreen-designer__main {
	position: relative;
	padding: 0px;
	border: 1px solid red;
	
	#workbench {
		position: relative;
		height: 100%;
	}
}
.bigscreen-designer__detail {
	
}

.name-code-unit {
	position: relative;
	height: 100%;
	font-size: 13px;
	
	.name-code-unit__inner {
		position: relative;
		height: 100%;
		display: flex;
		flex-wrap: nowrap;
		border-color: #eee;
		.name-code-unit__name {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			border: 1px solid;
		}
		.name-code-unit__code {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			border: 1px solid;
		}
		.name-code-unit__unit {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60px;
			border: 1px solid;
		}
		
	}
}

.diagram-bg {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.table {
	width: 100%;
	background: white;
	border: 1px solid #000;
	border-collapse: collapse;
	tr {
		height: 30px;
	}
	
	td {
		border: 1px solid #000;
	}
}